<template>
  <div class="card" @click="selectCard">
    <!-- vol标题 -->
    <div class="title">{{card.title}}</div>
    <!-- 内容 -->
    <div class="content">{{card.content}}</div>
    <!-- 作者 -->
    <div class="author">—— {{card.text_authors}}</div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'

export default {
  name: 'TextCard',
  props: {
    card: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  methods: {
    selectCard () {
      let self = this
      wx.navigateTo({
        url: '/pages/CardDetail/main',
        success (res) {
          self.setCurrentOne(self.card)
        }
      })
    },
    ...mapMutations({
      setCurrentOne: 'SET_CURRENT_ONE'
    })
  }
}
</script>

<style lang="stylus" scoped>
  .card
    margin 20px
    min-height 100px
    background-color #ffffff
    border-radius 10px
    box-shadow 0 5px 20px -5px #dddddd
    color #000
    letter-spacing 1.5px
    &:first-child
      position relative
      z-index 99
      margin-top -55px
    .title
      height 50px
      padding 0 20px
      border-radius 10px 10px 0 0
      background-color #ffffff
      border-bottom 1px dashed #eeeeee
      line-height 50px
      font-size 16px
      font-weight 300
    .content
      padding 10px 20px
      background-color #ffffff
      border-radius 0 0 10px 10px
      font-size 14px
      line-height 20px
      color #333
      font-weight 200
    .author
      padding 10px 20px
      text-align right
      font-size 12px
      color #999
      font-weight 100
</style>
